<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id ="app">
        {{msg}}


        <button @click='handlerClick'>点击组件销毁</button>


        <h2>  发送异步请求 获取数据 我们可以选择  created  或者 mounted 钩子函数</h2>
    </div>

    <script>
     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {
            msg:'生命周期'
        },
        methods: {
      //准备调用销毁函数  
      handlerClick() {
          alert('销毁')
          this.$destroy()

      }

        },
        beforeCreate() {
            console.log('beforeCreate');
            // console.log(this);
         
            console.log(this.msg);
            // var  app= document.getElementById('app')
            // console.log(app);
            // console.log(   app.innerHTML);

        },
        created() {

            // 在created  可以获取到  data定义的数据  但是 dom 的还没有被真正的挂载  
            console.log('created');
            // console.log(this);
           
            console.log(this.msg);
        //       var  app= document.getElementById('app')
        //     console.log(app);
        //  console.log(   app.innerHTML);      
        },
        beforeMount() {
            // 获取不到真正的dom  
            console.log('beforeMount');
            console.log(this.msg);
                         var  app= document.getElementById('app')
            console.log(app);
          console.log(app.innerHTML);

        },
        mounted() {
            //  mounted  data  以及真正的dom 渲染 完成
            // 可以进行dom 操作
            //  发送异步请求 进行数据渲染  必须要等有了dom之后才能进行数据的渲染与dom 操作

            console.log('mounted');
            console.log(this.msg);
                         var  app= document.getElementById('app')
            console.log(app);
            console.log(app.innerHTML);
        },
        //准备更新
        beforeUpdate() {
            console.log('beforeUpdate');
            console.log( this.msg);


        },
        //更新

        updated() {
            console.log('updated');
            console.log( this.msg);

        },

        //准备销毁

        beforeDestroy() {
            console.log('beforeDestroy');
            console.log( this.msg);
        },
     //销毁
      destroyed() {
          console.log('destroyed');
          console.log(this.msg);

      }


       
     }); 

    //  setTimeout(()=>{
    //      vm.msg='我被改变了'
    //  },3000)


   setTimeout(()=>{
       vm.$destroy()
    //    console.log( vm);
    // 一般情况当组件触发了销毁的钩子函数的时候 对应的事件 定时器  以及dom 手动清除  
    // 释放内存   提高性能优化 
   },3000)

    </script>
</body>

</html>